<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Search List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
  </head>
  <body>
    <div class="container">
      <h1 class="center-align">My Contacts</h1>

      <input type="text" id="filterInput" placeholder="Search Contacts">
      <ul id="names" class="collection with-header">
          <li class="collection-header">
            <h5>A</h5>
          </li>
          <li class="collection-item">
            <a href="#">Arno</a>
          </li>
          <li class="collection-item">
            <a href="#">Aiden</a>
          </li>
          <li class="collection-item">
            <a href="#">Avery</a>
          </li>
          <li class="collection-item">
            <a href="#">Asher</a>
          </li>
          <li class="collection-item">
            <a href="#">Ashton</a>
          </li>
          <li class="collection-header">
            <h5>B</h5>
          </li>
          <li class="collection-item">
            <a href="#">Ben</a>
          </li>
          <li class="collection-item">
            <a href="#">Baby</a>
          </li>
          <li class="collection-item">
            <a href="#">Brian</a>
          </li>
          <li class="collection-item">
            <a href="#">Brock</a>
          </li>
          <li class="collection-item">
            <a href="#">Bruce</a>
          </li>
          <li class="collection-header">
            <h5>E</h5>
          </li>
          <li class="collection-item">
            <a href="#">Elsa</a>
          </li>
          <li class="collection-item">
            <a href="#">Erthan</a>
          </li>
          <li class="collection-item">
            <a href="#">Ember</a>
          </li>
          <li class="collection-item">
            <a href="#">Ezio</a>
          </li>
          <li class="collection-header">
            <h5>S</h5>
          </li>
          <li class="collection-item">
            <a href="#">Santiago</a>
          </li>
          <li class="collection-item">
            <a href="#">Shawn</a>
          </li>
          <li class="collection-item">
            <a href="#">Steve</a>
          </li>
          <li class="collection-item">
            <a href="#">Samantha</a>
          </li>
          <li class="collection-item">
            <a href="#">Sydney</a>
          </li>
          <li class="collection-header">
            <h5>V</h5>
          </li>
          <li class="collection-item">
            <a href="#">Vincent</a>
          </li>
          <li class="collection-item">
            <a href="#">Venus</a>
          </li>
          <li class="collection-item">
            <a href="#">Victoria</a>
          </li>
      </ul>
    </div>

    <script src="../assets/js/ContactSearch.js"></script>
  </body>
</html>